<template>
  <div class="home-container">
    <!-- 背景视频 -->
    <video class="background-video" autoplay loop muted playsinline>
      <source src="/home-background.mp4" type="video/mp4">
    </video>
    <!-- 公告区域 -->
    <div class="announcements">
      <el-row :gutter="20" justify="center">
        <el-col :span="8" class="announcement-col">
          <el-card class="announcement-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-7 9h-2V5h2zm0 4h-2v-2h2z"/>
                  </svg>
                </el-icon>
                <span>更新公告</span>
              </div>
            </template>
            <div class="announcement-content">
              <div v-for="item in notice">
                <h1>{{ item.date }}</h1>
                <p v-for="contentItem in item.content">· {{ contentItem }}</p>
                <br>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8" class="announcement-col">
          <el-card class="announcement-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12c5.16-1.26 9-6.45 9-12V5zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11z"/>
                  </svg>
                </el-icon>
                <span>技术支持</span>
              </div>
            </template>
            <div class="announcement-content">
              <p style="display: flex; align-items: center; justify-content: flex-start; gap: 10px">
                Q群：<a href="https://qm.qq.com/q/l8b2zOEJwc" target="_blank" style="color: #333; text-decoration: none;">937677069</a>
                <el-button type="primary" link @click="copyQQGroup" style="padding: 4px 8px">
                  <el-icon>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
                      <path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
                    </svg>
                  </el-icon>
                </el-button>
              </p>
              <p>风华绝代：真剑 （UID：44246753138070）</p>
              <p>瑶光沁雪：寒衣作酒 （UID：44289702831553）</p>
              <p>有问题请联系 ↑↑↑↑↑↑</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {ElMessage} from 'element-plus';

const copyQQGroup = async () => {
  const qqGroup = '937677069';
  try {
    // 优先使用现代剪贴板API
    if (navigator.clipboard && window.isSecureContext) {
      await navigator.clipboard.writeText(qqGroup);
    } else {
      // 备用方案：使用传统方法
      const textArea = document.createElement('textarea');
      textArea.value = qqGroup;
      textArea.style.position = 'fixed';
      textArea.style.left = '-999999px';
      textArea.style.top = '-999999px';
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      try {
        document.execCommand('copy');
        textArea.remove();
      } catch (err) {
        textArea.remove();
        throw new Error('复制失败');
      }
    }
    ElMessage({
      message: 'QQ群号已复制到剪贴板',
      type: 'success',
      duration: 2000
    });
  } catch (err) {
    ElMessage({
      message: '复制失败，请手动复制',
      type: 'error',
      duration: 2000
    });
  }
};

const notice = [
  {
    "date": "2025.04.12 - 更新内容",
    "content": [
      "修复防具属性强化计算问题"
    ]
  },
  {
    "date": "2025.03.23 - 更新内容",
    "content": [
      "神兵现在支持强化了"
    ]
  },
  {
    "date": "2025.03.20 - 更新内容",
    "content": [
      "重新排版装备生成的图片",
      "防具强化、防具贴膜、护符贴膜",
      "10人噩梦炼血堂护符随机属性自选",
      "日月星新属性计算对应的护符特效属性加成（没有面板加成的攒不计算）"
    ]
  },
  {
    "date": "2025.03.13 - 更新内容",
    "content": [
      "临时方案兼容手机浏览器使用的问题"
    ]
  },
  {
    "date": "2025.03.07 - 更新内容",
    "content": [
      "移除专精选择，职业专精现在根据套装数量来判断是哪一个",
      "修复部分已知bug"]
  },
  {
    "date": "2025.03.04 - 更新内容",
    "content": [
      "新增鬼王T的属性面板计算",
      "配装保存现在可以保存法宝、天书了"]
  },
  {
    "date": "2025.02.28 - 更新内容",
    "content": [
      "新增325套装效果",
      "新增315套装融合功能",
      "新增配装结果生成图片保存分享功能"]
  },
  {
    "date": "2025.02.26 - 更新内容",
    "content": [
      "新增装备已录入，神兵一阶段已录入",
      "如果存在配装找不到请重新登陆保存下（历史遗留问题已修复）",
      "个人配装目前在右上角->个人中心->配装展示"]
  },
  {
    "date": "2025.02.25 - 更新内容",
    "content": [
      "修复配装保存后，无法找到配装问题",
      "清空目前已有配装，热门推荐暂不开放（待后续配装点赞功能完成 ）",
      "个人配装目前在右上角->个人中心->配装展示"]
  },
  {
    "date": "2025.02.24 - 更新内容",
    "content": [
      "新增335星魄，配装页面排版优化",
      "新增套装效果和特殊效果展示",
      "修复配装器重复保存装备和属性叠加的问题"]
  }
]
</script>

<style scoped>
a:hover {
  background-color: transparent;
}

.home-container {
  padding: 20px;
  position: relative;
  height: calc(100vh - 70px);
}

.background-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 1.2em;
  font-weight: bold;
}

.card-header .el-icon {
  margin-right: 8px;
  font-size: 1.4em;
}

.announcements {
  position: fixed;
  bottom: 80px;
  left: 0;
  right: 0;
  z-index: 1;
}

.announcement-card {
  height: 300px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
}

.announcement-content {
  color: #333;
  line-height: 1.6;
  height: 220px;
  overflow-y: auto;
  padding-right: 10px;
}

.announcement-content::-webkit-scrollbar {
  width: 6px;
}

.announcement-content::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.announcement-content::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.announcement-content p {
  margin: 8px 0;
}

@media (max-width: 800px) {
  .announcement-col {
    width: 100%;
    margin-bottom: 20px;
  }

  .announcements {
    position: relative;
    padding: 0 20px;
  }

  .el-row {
    margin: 0;
    flex-direction: column;
  }

  .announcement-card {
    width: 90vw;
    margin: 0 auto;
  }

  .el-col {
    max-width: 100%;
  }
}
</style>